<template>
  <div class="header-menu-item" @mouseleave="() => { isShow = false }">
    <a href="javascript:;" class="link" @mouseover="() => { isShow = true }">送至 {{ local }}</a>
    <div class="dorpdown-box right" v-show="isShow">
      <div
        class="logist-item"
        v-for="item in logistcsList"
        :class="item === local ? 'active' : ''"
        @click="() => { local = item }"
        :key="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import './headerMenuItem.scss'
import { getLogisticsAddrList } from '@/api/header/index'

export default {
  name: 'shopCar',
  data () {
    return {
      isShow: false,
      local: '浙江',
      logistcsList: []
    }
  },
  created () {
    getLogisticsAddrList().then(({ data }) => {
      this.logistcsList = data.data
    })
  }
}
</script>

<style lang="scss" scoped>
  .dorpdown-box {
    width: 210px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .logist-item {
      width: 3em;
      text-align: center;
      padding: 0 3px;
      cursor: pointer;
      line-height: 25px;
      &:hover {
        background: #7B111B;
        color: #FFFFFF;
      }
      &.active {
        background: #7B111B;
        color: #FFFFFF;
      }
    }
  }
</style>
